<!--
 * @description 卡片轮播3
 * @author dumeng
 * @date 2022/11/24
 -->
<template>
  <div id="cardSwiperThree" class="card-swiper-three-page" :style="{ 'margin-top': top, 'padding-left': spacing, 'background-color': bgcolor}">
    <cell-title
      v-if="option.title"
      :title="option.title"
      :hide-desc="option.isMore === '2'"
      :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          px2rem(option.radiusSize) + ' ' + px2rem(option.radiusSize) + ' 0 0'
      }"
    />
    <div class="swiper">
      <div class="swiper-wrapper">
        <div v-for="item in list" :id="item.id" :key="item.id" :style="{height: imgHeight}" class="swiper-slide">
          <label-comp v-if="(option.resource === 'hd' || option.resource === 'zb') && labelObj!==undefined" :label-list="item.labelList" class-name="my-tag" />
          <img :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :style="{'object-fit': imgType, height: imgHeight}" alt="">
          <span v-if="isInitData ? getMapping(item, 'title'): item.title" class="title">{{ isInitData ? getMapping(item, 'title'): item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import { v4 as uuidv4 } from 'uuid'
import CellTitle from './cellTitle'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'CardSwiperThree',
  components: {
    CellTitle,
    LabelComp
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      pageSize: '',
      labelObj: undefined
    }
  },
  computed: {
    // 是否自动播放
    autoplay() {
      return this.option.autoplay
    },
    // 自动轮播时长
    delay() {
      return this.option.delay > 0 ? this.option.delay * 1000 : 5000
    },
    // 是否循环
    loop() {
      return this.option.loop
    },
    // 图片高度
    imgHeight() {
      return this.px2rem(this.option.imgHeight || 340)
    },
    // 背景颜色
    bgcolor() {
      return this.option.bgcolor
    }
  },
  async mounted() {
    this.pageSize = this.option.number
    if (this.isInitData) {
      if (this.option.resource === 'hd' || this.option.resource === 'zb') {
        this.labelObj = await this.getLabelList()
      }
      await this.initData()
    } else {
      this.initSwiper()
    }
  },
  methods: {
    setData(result) {
      const { rows } = result.cardSwiperThree?.data || []
      if ((this.option.resource === 'hd' || this.option.resource === 'zb') && this.labelObj !== undefined) {
        this.setLabel(rows, 'list')
      } else {
        this.list = rows
      }
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    initSwiper() {
      const ths = this
      this.swiper = new Swiper('#cardSwiperThree .swiper', {
        slidesPerView: 1.1,
        spaceBetween: 10,
        autoplay: this.autoplay,
        delay: this.delay,
        loop: this.loop,
        observer: true,
        observeParents: true,
        on: {
          click: function(e) {
            // 后台管理不能跳转
            return
          }
        }
      })
    },
    /**
     * 跳转活动详情
     * @param item
     */
    goActDetail(item) {
      if (item.createType === 'WJX') {
        if (item.activityStatus === '进行中') {
          this.$router.push({ path: '/jumpOut', query: { title: item.activityName, linkUrl: item.urlCreate }})
          // window.location.href = item.urlCreate
        } else if (item.activityStatus === '已结束') {
          this.$dialog.toast({
            mes: `活动${item.activityStatus}`,
            timeout: 1500,
            icon: 'none'
          })
        } else {
          this.$dialog.toast({
            mes: `活动${item.activityStatus}`,
            timeout: 1500,
            icon: 'none'
          })
        }
      } else {
        if (item.activityType === 1) {
          this.$router.push({
            path: '/special/index',
            query: {
              id: item.id,
              f: '/activity/special',
              n: item.activityName
            }
          })
        } else if (item.activityType === 2) {
          if (item.activityStatus === '进行中') {
            this.$router.push(`/voteIndex?i=${item.id}`)
          } else if (
            item.activityStatus === '已结束' &&
              item.isExpried === '1'
          ) {
            this.$router.push(`/voteIndex?i=${item.id}&end=e`)
          } else {
            this.$dialog.toast({
              mes: `投票活动${item.activityStatus}`,
              timeout: 1500,
              icon: 'none'
            })
          }
        } else if (item.activityType === 3) {
          if (item.activityStatus === '进行中') {
            this.$router.push(`/survey?i=${item.id}`)
          } else {
            this.$dialog.toast({
              mes: `问卷调查活动${item.activityStatus}`,
              timeout: 1500,
              icon: 'none'
            })
          }
        } else if (item.activityType === 4) {
          if (item.activityStatus === '进行中') {
            this.$router.push(`/punchClock?i=${item.id}`)
          } else {
            this.$dialog.toast({
              mes: `打卡活动${item.activityStatus}`,
              timeout: 1500,
              icon: 'none'
            })
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

  .card-swiper-three-page {
    height: rem(300);
    width: rem(750);
    .swiper-slide {
      width: rem(720);
      position: relative;
      img {
        width: 100%;
        height: 100%;
        background: #c9c9c9;
        border-radius: rem(16);
      }
      .title {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: rem(60);
        line-height: rem(60);
        background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
        color: #fff;
        font-size: rem(26);
        font-weight: bold;
        z-index: 2;
        padding: 0 rem(20);
        border-radius: 0 0 rem(16) rem(16);
      }
    }
  }
</style>
